﻿@model FPP.Models.Collections.UserGameRoster
@{
    ViewBag.Title = string.Format("Famous People Pool - Roster for {0} in Game {1}", Model.Player.FirstName, Model.Game.Name);
}
@* Autocomplete for Adding a Celebrity *@
<script type="text/javascript" language="javascript">
    $(function () {
        function showPerson(id, name, imageurl, dob, age) {
            $("#celebID-Input").attr("value", id);
            $("#celebName-Value").text(name);
            $("#celebImage").attr("src", imageurl);
            $("#celebDOB-Value").text(dob);
            $("#celebAge-Value").text(age);
        }

        $("#FamousPersonSelector").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/FamousPeople/FPPAutoComplete",
                    type: "POST",
                    dataType: "json",
                    data: {
                        searchText: request.term,
                        maxResults: 12
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.DisplayName,
                                value: item.DisplayName,
                                id: item.Id,
                                imageUrl: item.ImageUrl,
                                age: item.Age,
                                dob: item.DoB
                            };
                        }));
                    }
                });
            },
            select: function (event, ui) {
                showPerson(ui.item.id,
                           ui.item.label,
                           ui.item.imageUrl,
                           ui.item.dob,
                           ui.item.age);
            },
            minLength: 1
        });

    });
</script>
<h2>
    @string.Format("{0}'s roster for game: ", Model.Player.FirstName, Model.Game.Name)
    <a href="@Url.Action("Details", "Games", new { id = Model.Game.Id })">@Model.Game.Name</a></h2>
<fieldset>
    <legend>Details for @Model.Game.Name</legend>
    <div id="leftCol" class="column span-6">
        <div class="display-field">
            <img alt="@Model.Game.Name" src="http://www.famouspeoplepool.com/_assets/images/hollywood-star.jpg" style="max-width: 230px" />
        </div>
        <h1>
            <a href="@Url.Action("Index", "Roster", new { id = Model.Game.Id })">Join Now</a>
        </h1>
        @Html.ActionLink("Back to Pools", "Index", "Games")
        @using (Html.BeginForm())
        {
            <h2>
                Add to your roster</h2>
            <input type="text" name="celebName" id="FamousPersonSelector" size="30" />
            <input id="celebID-Input" type="hidden" name="celebID" />
            <div class="column span-3">
                <img id="celebImage" width="100" alt="Celebrity Preview" src="../../Content/rc/images/fpp-CelebrityUnknown.gif" />
            </div>
            <div class="column span-3 last">
                <div>
                    <div id="celebName-Label">
                        Name :
                    </div>
                    <div id="celebName-Value">
                    </div>
                </div>
                <div>
                    <div id="celebDOB-Label">
                        Birthday :
                    </div>
                    <div id="celebDOB-Value">
                    </div>
                </div>
                <div>
                    <div id="celebAge-Label">
                        Age :
                    </div>
                    <div id="celebAge-Value">
                    </div>
                </div>
            </div>
            <br />
            <input type="submit" value="Add to Roster" />
        }
    </div>
    <div id="rightCol" class="column span-11 last clearfix">
        @{
            Html.RenderPartial("_ManageRoster", Model);
        }
    </div>
</fieldset>
<br />
<!-- Modal Popup -->
